<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>月报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .main-container {
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .report-container {
            width: 720px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline-block;
            float:left;
        }
        .report-content {
            padding: 20px;
            width: 600px;
            height: 400px;
            position: relative
        }
        .custom-content .search-bar {
            box-sizing: border-box;
            padding: 20px;
        }
    </style>
</head>

<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>ECHART报表1（悦健康）</div>
            </div>
            <div flex-box="1">
                <div class="main-container">
                    <!--11分城市订单月增量表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市订单月增量表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="orderCityIncrementReport_month"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderCityIncrementReport" :options="orderCityIncrementReport"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--26日订单表总表-->
                    <div class="report-container">
                        <el-section-pannel title="日订单表总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="orderDailySummaryReport_dayRange"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderDailySummaryReport" :options="orderDailySummaryReport"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--12用户来源情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="用户来源情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="channelUserComeFromReportService"
                                             :options="channelUserComeFromReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--13儿用户来源情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="儿用户来源情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="babyUserComeFromTotalReportService"
                                             :options="babyUserComeFromTotalReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--14孕用户来源情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="孕用户来源情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="preUserComeFromTotalReportService"
                                             :options="preUserComeFromTotalReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!-- 公众号月增量用户表 -->
                    <div class="report-container">
                        <el-section-pannel title="公众号月增量用户表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="search-bar">
                                    <el-select v-model="publicUserMonthAddReportService_cityId" placeholder="选择城市">
                                        <el-option
                                                v-for="item in getRunningAreaList"
                                                :key="item.cityAreaId"
                                                :label="item.cityAreaName"
                                                :value="item.cityAreaId">
                                        </el-option>
                                    </el-select>
                                    <el-date-picker
                                            v-model="publicUserMonthAddReportService_monthStart"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="起始月份">
                                    </el-date-picker>
                                    <el-date-picker
                                            v-model="publicUserMonthAddReportService_monthEnd"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="截止月份">
                                    </el-date-picker>
                                </div>
                                <div class="report-content">
                                    <v-chart ref="publicUserMonthAddReportService"
                                             :options="publicUserMonthAddReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--平台日活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="平台日活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="systemActiveDayReportService_dayRange"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="systemActiveDayReportService"
                                             :options="systemActiveDayReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--平台月活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="平台月活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="systemActiveMonthReportService_monthStart"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="起始月份">
                                </el-date-picker>
                                <el-date-picker
                                        v-model="systemActiveMonthReportService_monthEnd"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="截止月份">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="systemActiveMonthReportService"
                                             :options="systemActiveMonthReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--社群日活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="社群日活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="wechatActiveDayReportService_dayRange"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="wechatActiveDayReportService"
                                             :options="wechatActiveDayReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--社群月增量用户表-->
                    <div class="report-container">
                        <el-section-pannel title="社群月增量用户表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="search-bar">
                                    <el-select v-model="wechatUserMonthAddReportService_cityId" placeholder="选择城市">
                                        <el-option
                                                v-for="item in getRunningAreaList"
                                                :key="item.cityAreaId"
                                                :label="item.cityAreaName"
                                                :value="item.cityAreaId">
                                        </el-option>
                                    </el-select>
                                    <el-date-picker
                                            v-model="wechatUserMonthAddReportService_monthStart"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="起始月份">
                                    </el-date-picker>
                                    <el-date-picker
                                            v-model="wechatUserMonthAddReportService_monthEnd"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="截止月份">
                                    </el-date-picker>
                                </div>
                                <div class="report-content">
                                    <v-chart ref="wechatUserMonthAddReportService"
                                             :options="wechatUserMonthAddReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--社群月活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="社群月活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="wechatActiveMonthReportService_monthStart"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="起始月份">
                                </el-date-picker>
                                <el-date-picker
                                        v-model="wechatActiveMonthReportService_monthEnd"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="截止月份">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="wechatActiveMonthReportService"
                                             :options="wechatActiveMonthReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--30用户爱好分析-->
                    <div class="report-container">
                        <el-section-pannel title="用户爱好分析" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div>
                                    <div style="height: 440px;width:100%">
                                        <el-table
                                                :data="userHobbiesReport"
                                                height="440"
                                                style="width: 100%">
                                            <el-table-column
                                                    fixed
                                                    prop="labelName"
                                                    label="类别"
                                                    width="150">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="UV"
                                                    label="UV">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="PV"
                                                    label="PV">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--小助手情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="小助手情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div>
                                    <div style="height: 440px;width:100%">
                                        <el-table
                                                :data="assistantListTotalReportService"
                                                height="440"
                                                style="width: 100%">
                                            <el-table-column
                                                    fixed
                                                    prop="wechatName"
                                                    label="小助手名"
                                                    width="150">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="peopleNum"
                                                    label="好友数">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="groupNum"
                                                    label="加群数">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--圈效果表PV,UV,订单-->
                    <div class="report-container">
                        <el-section-pannel title="圈效果表PV,UV,订单" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div>
                                    <div style="height: 440px;width:100%">
                                        <el-table
                                                :data="firendCircleEffectReportService"
                                                height="440"
                                                style="width: 100%">
                                            <el-table-column
                                                    fixed
                                                    prop="name"
                                                    label="圈标题"
                                                    width="150">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="pv"
                                                    label="PV">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="uv"
                                                    label="UV">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderCount"
                                                    label="成单数">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!-- 公众号月留存率 -->
                    <div class="report-container">
                        <el-section-pannel title="公众号月留存率" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="publicRetainMonthReportService_month"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div>
                                    <div style="height: 440px;width:100%">
                                        <el-table
                                                :data="publicRetainMonthReportService"
                                                height="440"
                                                style="width: 100%">
                                            <el-table-column
                                                    fixed
                                                    prop="month"
                                                    label="月份"
                                                    width="150">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="retention"
                                                    label="留存率">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--朋友圈分时数据表-->
                    <div class="report-container">
                        <el-section-pannel title="朋友圈分时数据表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-select v-model="firendCircleEffectMinSecondReportService_account" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in firendCircleEffectMinSecondReportService_Assistants"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-date-picker
                                        v-model="wechatActiveMonthReportService_monthStart"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                                <el-button type="primary" icon="el-icon-refresh"></el-button>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="firendCircleEffectMinSecondReportService"
                                             :options="firendCircleEffectMinSecondReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!-- 群分时数据表 -->
                    <div class="report-container">
                        <el-section-pannel title="群分时数据表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-select v-model="groupEffectDetailReportService_account" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in groupEffectDetailReportService_groupList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-date-picker
                                        v-model="groupEffectDetailReportService_beginDate"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                                <el-button type="primary" icon="el-icon-refresh"></el-button>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="groupEffectDetailReportService"
                                             :options="groupEffectDetailReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                </div>
            </div>
        </div>
    </el-admin-menu>
</div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')

  /**
   * 得到请求链接
   * @param prefix
   * @param path
   */
  function makePath (prefix, path) {
    var reg = new RegExp(/((\.\w+){2}$)/)
    reg.test(window.location.hostname)
    if (path.indexOf('/') !== 0) {
      path = '/' + path
    }
    return window.location.protocol + '//' + prefix + RegExp.$1 + path
  }

  /**
   * 生成折线图的options对象
   * @param title
   */
  function makeOptions (title, options) {
    options.title = {
      text: title
    }
    options.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    }
    options.toolbox = {
      feature: {
        saveAsImage: {}
      }
    }
    return options
  }
</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<!-- <script src="./lib/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

<!-- 11分城市订单月增量表 -->
<script>
  var orderCityIncrementReportMixins = {
    data: function () {
      return {
        orderCityIncrementReport_month: '201904',
        orderCityIncrementReport: null
      }
    },
    methods: {
      orderCityIncrementReportFetch: function () {
        var that = this
        this.$refs.orderCityIncrementReport.showLoading()
        $.base.sendHttpRequest(makePath('report', '/orderCityIncrementReport'), { month: that.orderCityIncrementReport_month },
          function (resp) {
            var list = resp.data.reportList || []
            that.orderCityIncrementReport = makeOptions('分城市订单月增量表', {
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: list.map(function (item) {
                  return item.city
                })
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: list.map(function (item) {
                  return item.orderIncrementCount
                }),
                type: 'line',
                areaStyle: {}
              }]
            })
            that.$refs.orderCityIncrementReport.hideLoading()
          }, function (complete) {}, function (error) {})
      }
    },
    mounted:function() {
      this.orderCityIncrementReportFetch()
    },
    watch: {
      orderCityIncrementReport_month:function(val) {
        this.orderCityIncrementReportFetch()
      }
    }
  }
</script>

<!-- 26日订单表总表 -->
<script>
    var orderDailySummaryReport = {
      data:function(){
        return {
          orderDailySummaryReport:null,
          orderDailySummaryReport_dayRange:[]
        }
      },
      methods:{
        orderDailySummaryReportFetch:function () {
          var that = this
          this.$refs.orderDailySummaryReport.showLoading()
          $.base.sendHttpRequest(makePath('report', '/orderDailySummaryReport'), {
              dayStart:that.dayStart,
              dayEnd:that.dayEnd
            },function(resp){
                var list = resp.data.reportList||[];
                that.orderDailySummaryReport = makeOptions('日订单表总表', {
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: list.map(function (item) { return item.day })
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [{
                    data: list.map(function (item) { return item.orderSummaryCount }),
                    type: 'line',
                    areaStyle: {}
                  }]
                })
                that.$refs.orderDailySummaryReport.hideLoading()
            },function(complete){},function(error){})
        }
      },
      mounted:function(){
        this.orderDailySummaryReportFetch();
      },
      watch:{
        orderDailySummaryReport_dayRange:function(val){
            this.orderDailySummaryReportFetch();
        }
      },
      computed:{
        dayStart:function(){
          if(this.orderDailySummaryReport_dayRange && this.orderDailySummaryReport_dayRange.length > 0) {
            return this.orderDailySummaryReport_dayRange[0]
          }
          return null;
        },
        dayEnd:function(){
          if(this.orderDailySummaryReport_dayRange && this.orderDailySummaryReport_dayRange.length > 1) {
            return this.orderDailySummaryReport_dayRange[1]
          }
          return null;
        }
      }
    }
</script>

<!-- 12用户来源情况总表 -->
<script>
  var channelUserComeFromReportServiceMixins = {
    data: function () {
      return {
        channelUserComeFromReportService:null
      }
    },
    methods: {
      channelUserComeFromReportServiceFetch: function () {
        var that = this
        that.$refs.channelUserComeFromReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/channelUserComeFromReportService'), {},
          function (resp) {
            var data = resp.data
            that.channelUserComeFromReportService = makeOptions('12用户来源情况总表', {
              legend: {
                data: ['在线', '离线']
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: (data.onlineList || []).map(function (item) {return item.month})
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series:[
                {
                  name:'在线',
                  type:'line',
                  stack:'总量',
                  areaStyle:{},
                  data:(data.onlineList || []).map(function (item) {return item.count})
                },
                {
                  name:'离线',
                  type:'line',
                  stack:'总量',
                  areaStyle:{},
                  data:(data.offlineList || []).map(function (item) {return item.count})
                }
              ]
            })
            that.$refs.channelUserComeFromReportService.hideLoading()
          },
          function (complete) {},
          function (error) {}
        )
      }
    },
    mounted:function() {
      this.channelUserComeFromReportServiceFetch()
    }
  }
</script>
<!-- 13儿用户来源情况总表 -->
<script>
    var babyUserComeFromTotalReportServiceMixins = {
      data:function(){
        return {
          babyUserComeFromTotalReportService:null
        }
      },
      methods:{
        babyUserComeFromTotalReportServiceFetch:function(){
          var that = this
          that.$refs.babyUserComeFromTotalReportService.showLoading()
          $.base.sendHttpRequest(makePath('report', '/babyUserComeFromTotalReportService'), {},
            function (resp) {
              var data = resp.data
              that.babyUserComeFromTotalReportService = makeOptions('儿用户来源情况总表', {
                legend: {
                  data: ['在线', '离线']
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: (data.onlineList || []).map(function (item) {return item.month})
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series:[
                  {
                    name:'在线',
                    type:'line',
                    stack:'总量',
                    areaStyle:{},
                    data:(data.onlineList || []).map(function (item) {return item.count})
                  },
                  {
                    name:'离线',
                    type:'line',
                    stack:'总量',
                    areaStyle:{},
                    data:(data.offlineList || []).map(function (item) {return item.count})
                  }
                ]
              })
              that.$refs.babyUserComeFromTotalReportService.hideLoading()
            },
            function (complete) {},
            function (error) {}
          )
        }
      },
      mounted:function(){
        this.babyUserComeFromTotalReportServiceFetch();
      }
    }
</script>
<!-- 14孕用户来源情况总表 -->
<script>
    var preUserComeFromTotalReportServiceMixins = {
      data:function(){
        return {
          preUserComeFromTotalReportService:null
        }
      },
      methods:{
        preUserComeFromTotalReportServiceFetch:function(){
          var that = this
          that.$refs.preUserComeFromTotalReportService.showLoading()
          $.base.sendHttpRequest(makePath('report', '/preUserComeFromTotalReportService'), {},
            function (resp) {
              var data = resp.data
              that.preUserComeFromTotalReportService = makeOptions('孕用户来源情况总表', {
                legend: {
                  data: ['在线', '离线']
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: (data.onlineList || []).map(function (item) {return item.month})
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series:[
                  {
                    name:'在线',
                    type:'line',
                    stack:'总量',
                    areaStyle:{},
                    data:(data.onlineList || []).map(function (item) {return item.count})
                  },
                  {
                    name:'离线',
                    type:'line',
                    stack:'总量',
                    areaStyle:{},
                    data:(data.offlineList || []).map(function (item) {return item.count})
                  }
                ]
              })
              that.$refs.preUserComeFromTotalReportService.hideLoading()
            },
            function (complete) {},
            function (error) {}
          )
        }
      },
      mounted:function(){
        this.preUserComeFromTotalReportServiceFetch();
      }
    }
</script>
<!-- 公众号月增量用户表 -->
<script>
    var publicUserMonthAddReportServiceMixins = {
      data:function(){
        return {
          publicUserMonthAddReportService:null,
          publicUserMonthAddReportService_cityId:'',
          publicUserMonthAddReportService_monthStart:'',
          publicUserMonthAddReportService_monthEnd:''
        }
      },
      methods:{
        publicUserMonthAddReportServiceFetch:function(){
          var that = this
          that.$refs.publicUserMonthAddReportService.showLoading()
          $.base.sendHttpRequest(makePath('report', '/publicUserMonthAddReportService'), {
              cityId:that.publicUserMonthAddReportService_cityId,
              monthStart: that.publicUserMonthAddReportService_monthStart,
              monthEnd: that.publicUserMonthAddReportService_monthEnd
            },
            function (resp){
              var list = resp.data.reportList||[]
              that.publicUserMonthAddReportService = makeOptions("公众号月增量用户表",{
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: list.map(function (item) {return item.month})
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series:[
                  {
                    type:'line',
                    stack:'',
                    areaStyle:{},
                    data:list.map(function (item) {return item.peopleNum})
                  }
                ]
              })
              that.$refs.publicUserMonthAddReportService.hideLoading()
            },
            function (complete) {},
            function (error) {}
          )
        }
      },
      mounted:function(){
        this.publicUserMonthAddReportServiceFetch()
      },
      watch:{
        publicUserMonthAddReportService_cityId:function(val){
          this.publicUserMonthAddReportServiceFetch()
        },
        publicUserMonthAddReportService_monthStart:function(val){
          this.publicUserMonthAddReportServiceFetch()
        },
        publicUserMonthAddReportService_monthEnd:function(val){
          this.publicUserMonthAddReportServiceFetch()
        }
      }
    }
</script>

<!-- 平台日活跃表PV，UV -->
<script>
    var systemActiveDayReportServiceMixins = {
      data:function(){
        return {
          systemActiveDayReportService:null,
          systemActiveDayReportService_dayRange:[]
        }
      },
      methods:{
        systemActiveDayReportServiceFetch:function(){
          var that = this
          that.$refs.systemActiveDayReportService.showLoading()
          $.base.sendHttpRequest(makePath('report', '/systemActiveDayReportService'), {
              dayStart:that.dayStart,
              dayEnd:that.dayEnd
          },function(resp){
            var list = resp.data.reportList||[];
            var dayArr = list.map(function (item) {return item.day})
            var pvArr = list.map(function (item) {return item.pv})
            var uvArr = list.map(function (item) {return item.uv})
            that.systemActiveDayReportService = makeOptions('平台日活跃表PV，UV',{
              legend: {
                data:['PV','UV']
              },
              xAxis : [{
                type : 'category',
                boundaryGap : false,
                data : dayArr
              }],
              yAxis : [{
                type : 'value'
              }],
              series : [{
                name:'UV',
                type:'line',
                areaStyle: {},
                data:uvArr
              },
                {
                  name:'PV',
                  type:'line',
                  areaStyle: {},
                  data:pvArr
                }
              ]
            })
            that.$refs.systemActiveDayReportService.hideLoading()
          },function(complete){},function(error){} )
        }
      },
      mounted:function(){
        this.systemActiveDayReportServiceFetch()
      },
      computed:{
        dayStart:function(){
          if (this.systemActiveDayReportService_dayRange && this.systemActiveDayReportService_dayRange.length > 0) {
            return this.systemActiveDayReportService_dayRange[0]
          }
          return null
        },
        dayEnd:function(){
          if (this.systemActiveDayReportService_dayRange && this.systemActiveDayReportService_dayRange.length > 1) {
            return this.systemActiveDayReportService_dayRange[1]
          }
          return null
        }
      },
      watch:{
        systemActiveDayReportService_dayRange:function(val){
          this.systemActiveDayReportServiceFetch()
        }
      }
    }
</script>

<!-- 平台月活跃表PV，UV -->
<script>
    var systemActiveMonthReportServiceMixins = {
        data:function(){
          return {
            systemActiveMonthReportService:null,
            systemActiveMonthReportService_monthStart:'',
            systemActiveMonthReportService_monthEnd:''
          }
        },
        methods:{
          systemActiveMonthReportServiceFetch:function(){
            var that = this
            that.$refs.systemActiveMonthReportService.showLoading()
            $.base.sendHttpRequest(makePath('report', '/systemActiveMonthReportService'), {
              monthStart:that.systemActiveMonthReportService_monthStart,
              monthEnd:that.systemActiveMonthReportService_monthEnd
            },function(resp){
              var list = resp.data.reportList||[];
              var dayArr = list.map(function (item) {return item.month});
              var pvArr = list.map(function (item) {return item.pv})
              var uvArr = list.map(function (item) {return item.uv})
              that.systemActiveMonthReportService = makeOptions("平台月活跃表PV，UV",{
                legend: {
                  data:['PV','UV']
                },
                xAxis : [{
                  type : 'category',
                  boundaryGap : false,
                  data : list.map(function (item) {return item.month})
                }],
                yAxis : [{
                  type : 'value'
                }],
                series : [{
                  name:'UV',
                  type:'line',
                  areaStyle: {},
                  data:uvArr
                },
                  {
                    name:'PV',
                    type:'line',
                    areaStyle: {},
                    data:pvArr
                  }
                ]
              })
              that.$refs.systemActiveMonthReportService.hideLoading()
            },function(complete){},function(error){} )
          }
        },
      mounted:function(){
          this.systemActiveMonthReportServiceFetch()
      },
      watch:{
        systemActiveMonthReportService_monthStart:function(val){
          this.systemActiveMonthReportServiceFetch()
        },
        systemActiveMonthReportService_monthEnd:function(val){
          this.systemActiveMonthReportServiceFetch()
        }
      }
    }
</script>

<!-- 社群日活跃表PV，UV -->
<script>
    var wechatActiveDayReportServiceMixins = {
      data:function(){
        return {
          wechatActiveDayReportService:null,
          wechatActiveDayReportService_dayRange:[]
        }
      },
      methods:{
        wechatActiveDayReportServiceFetch:function(){
          var that = this
          that.$refs.wechatActiveDayReportService.showLoading()
          $.base.sendHttpRequest(makePath('report', '/wechatActiveDayReportService'), {
            dayStart:that.dayStart,
            dayEnd:that.dayEnd
          },function(resp){
            var list = resp.data.reportList||[];
            that.wechatActiveDayReportService = makeOptions("社群日活跃表PV，UV",{
              legend: {
                data: ['PV', 'UV']
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: list.map(function (item) {return item.day})
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series:[
                {
                  name:'PV',
                  type:'line',
                  areaStyle:{},
                  data:list.map(function (item) {return item.pv})
                },
                {
                  name:'UV',
                  type:'line',
                  areaStyle:{},
                  data:list.map(function (item) {return item.uv})
                }
              ]
            })
            that.$refs.wechatActiveDayReportService.hideLoading()
          },function(complete){},function(error){} )
        }
      },
      mounted:function(){
        this.wechatActiveDayReportServiceFetch()
      },
      computed:{
        dayStart:function(){
          if(this.wechatActiveDayReportService_dayRange && this.wechatActiveDayReportService_dayRange.length > 0){
            return this.wechatActiveDayReportService_dayRange[0]
          }
          return null;
        },
        dayEnd:function(){
          if(this.wechatActiveDayReportService_dayRange && this.wechatActiveDayReportService_dayRange.length > 1){
            return this.wechatActiveDayReportService_dayRange[1]
          }
          return null;
        }
      },
      watch:{
        wechatActiveDayReportService_dayRange:function(val){
          this.wechatActiveDayReportServiceFetch()
        }
      }
    }
</script>

<!-- 社群月增量用户表 -->
<script>
  var wechatUserMonthAddReportServiceMixins = {
    data:function(){
      return {
        wechatUserMonthAddReportService:null,
        wechatUserMonthAddReportService_cityId:'',
        wechatUserMonthAddReportService_monthStart:'',
        wechatUserMonthAddReportService_monthEnd:''
      }
    },
    methods:{
      wechatUserMonthAddReportServiceFetch:function(){
        var that = this
        that.$refs.wechatUserMonthAddReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/wechatUserMonthAddReportService'), {
            cityId:that.wechatUserMonthAddReportService_cityId,
            monthStart: that.wechatUserMonthAddReportService_monthStart,
            monthEnd: that.wechatUserMonthAddReportService_monthEnd
          },
          function (resp){
            var list = resp.data.reportList||[]
            that.wechatUserMonthAddReportService = makeOptions("社群月增量用户表",{
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: list.map(function (item) {return item.month})
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series:[
                {
                  type:'line',
                  stack:'',
                  areaStyle:{},
                  data:list.map(function (item) {return item.peopleNum})
                }
              ]
            })
            that.$refs.wechatUserMonthAddReportService.hideLoading()
          },
          function (complete) {},
          function (error) {}
        )
      }
    },
    mounted:function(){
      this.wechatUserMonthAddReportServiceFetch()
    },
    watch:{
      wechatUserMonthAddReportService_cityId:function(val){
        this.wechatUserMonthAddReportServiceFetch()
      },
      wechatUserMonthAddReportService_monthStart:function(val){
        this.wechatUserMonthAddReportServiceFetch()
      },
      wechatUserMonthAddReportService_monthEnd:function(val){
        this.wechatUserMonthAddReportServiceFetch()
      }
    }
  }
</script>

<!-- 社群月活跃表PV，UV -->
<script>
  var wechatActiveMonthReportServiceMixins = {
    data:function(){
      return {
        wechatActiveMonthReportService:null,
        wechatActiveMonthReportService_monthStart:'',
        wechatActiveMonthReportService_monthEnd:''
      }
    },
    methods:{
      wechatActiveMonthReportServiceFetch:function(){
        var that = this
        that.$refs.wechatActiveMonthReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/wechatActiveMonthReportService'), {
          monthStart:that.systemActiveMonthReportService_monthStart,
          monthEnd:that.systemActiveMonthReportService_monthEnd
        },function(resp){
          var list = resp.data.reportList||[];
          that.wechatActiveMonthReportService = makeOptions("社群月活跃表PV，UV",{
            legend: {
              data: ['PV', 'UV']
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: list.map(function (item) {return item.month})
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:[
              {
                name:'PV',
                type:'line',
                stack:'总量',
                areaStyle:{},
                data:list.map(function (item) {return item.pv})
              },
              {
                name:'UV',
                type:'line',
                stack:'总量',
                areaStyle:{},
                data:list.map(function (item) {return item.uv})
              }
            ]
          })
          that.$refs.wechatActiveMonthReportService.hideLoading()
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.wechatActiveMonthReportServiceFetch()
    },
    watch:{
      wechatActiveMonthReportService_monthStart:function(val){
        this.wechatActiveMonthReportServiceFetch()
      },
      wechatActiveMonthReportService_monthEnd:function(val){
        this.wechatActiveMonthReportServiceFetch()
      }
    }
  }
</script>

<!--30用户爱好分析-->
<script>
    var userHobbiesReportMixins = {
      data:function(){
        return {
          userHobbiesReport:[]
        }
      },
      methods:{
        userHobbiesReportFetch:function(){
          var that = this
          $.base.sendHttpRequest(makePath('report', '/userHobbiesReport'), {},function(resp){
            that.userHobbiesReport = resp.data.reportList||[];
          },function(complete){},function(error){} )
        }
      },
      mounted:function(){
        this.userHobbiesReportFetch()
      }
    }
</script>

<!-- 小助手情况总表 -->
<script>
    var assistantListTotalReportServiceMixins = {
      data:function(){
        return {
          assistantListTotalReportService:[]
        }
      },
      methods:{
        assistantListTotalReportServiceFetch:function(){
          var that = this;
          $.base.sendHttpRequest(makePath('report', '/assistantListTotalReportService'), {},function(resp){
            that.assistantListTotalReportService = resp.data.reportList||[];
          },function(complete){},function(error){} )
        }
      },
      mounted:function(){
        this.assistantListTotalReportServiceFetch();
      }
    }
</script>

<!-- 圈效果表PV,UV,订单 -->
<script>
    var firendCircleEffectReportServiceMixins = {
        data:function(){
          return {
            firendCircleEffectReportService:[]
          }
        },
      methods:{
        firendCircleEffectReportServiceFetch:function(){
          var that = this;
          $.base.sendHttpRequest(makePath('report', '/firendCircleEffectReportService'), {},function(resp){
            that.firendCircleEffectReportService = resp.data.list||[];
          },function(complete){},function(error){} )
        }
      },
      mounted:function(){
          this.firendCircleEffectReportServiceFetch()
      }
    }
</script>

<!-- 公众号月留存率 -->
<script>
    var publicRetainMonthReportServiceMixins = {
      data:function(){
        return {
          publicRetainMonthReportService:[],
          publicRetainMonthReportService_month:''
        }
      },
      methods:{
        publicRetainMonthReportServiceFetch:function(){
          var that = this;
          $.base.sendHttpRequest(makePath('report', '/publicRetainMonthReportService'), { month:that.publicRetainMonthReportService_month },function(resp){
            that.publicRetainMonthReportService = resp.data.reportList||[];
          },function(complete){},function(error){} )
        }
      },
      mounted:function(){
        this.publicRetainMonthReportServiceFetch()
      },
      watch:{
        publicRetainMonthReportService_month:function(val) {
          this.publicRetainMonthReportServiceFetch()
        }
      }
    }
</script>

<!-- 朋友圈分时数据表 -->
<script>
  var firendCircleEffectMinSecondReportServiceMixins = {
    data:function () {
      return {
        firendCircleEffectMinSecondReportService_account:'',
        firendCircleEffectMinSecondReportService_Assistants:[{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        firendCircleEffectMinSecondReportService_beginDate:'2019-05-01',
        firendCircleEffectMinSecondReportService:{}
      }
    },
    methods:{
      firendCircleEffectMinSecondReportServiceFetch:function(){
        let that = this;
        this.$refs.firendCircleEffectMinSecondReportService.showLoading()
        var clockArr = list.map(function (item) { return item.clock })
        var pvArr = list.map(function (item) {return item.pv})
        var uvArr = list.map(function (item) {return item.uv})
        var countArr = list.map(function (item) {return item.orderCount})

        $.base.sendHttpRequest(makePath('report', '/firendCircleEffectMinSecondReportService'), { account: that.firendCircleEffectMinSecondReportService_account, beginDate:that.firendCircleEffectMinSecondReportService_beginDate},
          function (resp) {
            var list = resp.data.list || []
            that.firendCircleEffectMinSecondReportService = makeOptions('朋友圈分时数据表', {
              legend: {
                data: ['PV', 'UV', '订单']
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: clockArr
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                name:'PV',
                type:'line',
                areaStyle:{},
                data:pvArr
              },{
                name:'UV',
                type:'line',
                areaStyle:{},
                data:uvArr
              },{
                name:'订单',
                type:'line',
                areaStyle:{},
                data:countArr
              }]
            })
            that.$refs.firendCircleEffectMinSecondReportService.hideLoading()
          }, function (complete) {}, function (error) {})
      },
      // 读取小助手列表
      firendCircleEffectMinSecondReportServiceAssistantListFetch:function(callback){
        callback && callback()
      }
    },
    mounted:function(){
      var that = this;
      this.firendCircleEffectMinSecondReportServiceAssistantListFetch(function(){
        that.firendCircleEffectMinSecondReportServiceFetch()
      })
    }
  }
</script>

<!-- 群分时数据表 -->
<script>
    var groupEffectDetailReportServiceMixins = {
      data:{
        groupEffectDetailReportService:{},
        groupEffectDetailReportService_beginDate:'2019-05-01',
        groupEffectDetailReportService_account:'',
        groupEffectDetailReportService_groupList:[{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
      },
      methods:{
        groupEffectDetailReportServiceFetch:function(){
          let that = this;
          this.$refs.groupEffectDetailReportService.showLoading()
          $.base.sendHttpRequest(makePath('report', '/groupEffectDetailReportService'), { account: that.firendCircleEffectMinSecondReportService_account, beginDate:that.firendCircleEffectMinSecondReportService_beginDate},
            function (resp) {
              var list = resp.data.list || []
              var clockArr = list.map(function (item) { return item.clock })
              var pvArr = list.map(function (item) {return item.pv})
              var uvArr = list.map(function (item) {return item.uv})
              var countArr = list.map(function (item) {return item.orderCount})
              that.groupEffectDetailReportService = makeOptions('群分时数据表', {
                legend: {
                  data: ['PV', 'UV', '订单']
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: clockArr
                },
                yAxis: {
                  type: 'value'
                },
                series: [{
                  name:'PV',
                  type:'line',
                  areaStyle:{},
                  data:pvArr
                },{
                  name:'UV',
                  type:'line',
                  areaStyle:{},
                  data:uvArr
                },{
                  name:'订单',
                  type:'line',
                  areaStyle:{},
                  data:countArr
                }]
              })
              that.$refs.groupEffectDetailReportService.hideLoading()
            }, function (complete) {}, function (error) {})
        },
        groupEffectDetailReportServiceGroupListFetch:function(callback){
            callback && callback()
        }
      },
      mounted(){
        let that = this;
        this.groupEffectDetailReportServiceGroupListFetch(function(){
            that.groupEffectDetailReportServiceFetch()
        })
      }
    }
</script>

<script>
  Vue.component('v-chart', VueECharts)
  new Vue({
    el: '#app',
    mixins: [
      $.base.globalMixin,
      orderCityIncrementReportMixins,
      orderDailySummaryReport,
      channelUserComeFromReportServiceMixins,
      babyUserComeFromTotalReportServiceMixins,
      preUserComeFromTotalReportServiceMixins,
      publicUserMonthAddReportServiceMixins,
      systemActiveDayReportServiceMixins,
      systemActiveMonthReportServiceMixins,
      wechatActiveDayReportServiceMixins,
      wechatUserMonthAddReportServiceMixins,
      wechatActiveMonthReportServiceMixins,
      userHobbiesReportMixins,
      assistantListTotalReportServiceMixins,
      firendCircleEffectReportServiceMixins,
      publicRetainMonthReportServiceMixins,
      firendCircleEffectMinSecondReportServiceMixins,
      groupEffectDetailReportServiceMixins
    ],
    data: function () {
      return {
        username: '',
        enterDate: '',
        visible: false,
        // 来自test_data.js
        menus: menus,
        // 来自test_data.js
        userDetail: userDetail,
        initOptions: {},
        getRunningAreaList:[]
      }
    },
    created(){
        this.getRunningAreaFetch()
    },
    methods: {
      getRunningAreaFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('basic','/getRunningArea'), {},
          function(resp){
            that.getRunningAreaList = resp.data.runningAreaList
          },
          function(complete){},
          function(error){}
        )
      },
      logout:function() {
        window.location.href = 'login.html'
      }
    },
    mounted:function() {
      document.querySelector('body').style.display = 'block'
    }
  })
</script>

</html>